<template>
  <view>
    <!-- 使用自定义搜索组件 -->
    <my-search @click.native="gotoSearch"></my-search>
    <view class="scroll-view-container">
     
      <!-- 左侧滑动区 -->
      <scroll-view scroll-y="true" class="left-scroll-row" :style="{height:wh + 'px'}">
          <view class="left-scroll-view-item" :class="{active:i === active}" @click="activeChange(i)" v-for="(item,i) in  cateList">
            {{item.cat_name}}
          </view>
      </scroll-view>
      <!-- 右侧滑动区 -->
      <scroll-view :scroll-top="scrolltop" scroll-y="true" :style="{height:wh + 'px'}">
        <view class="right-scroll-item" v-for="(item,i) in cateLevel2" :key="i" >
          <view class="right-scroll-title">
            /{{item.cat_name}}/
          </view>
          <view class="cate_leav3">
            <block v-for="(item2,index) in item.children" :key="index">
              <view class="cate_leav3_item" @click="goToGoodsList(item2)" >
                <!-- 图片 -->
                <image :src="item2.cat_icon" ></image>
                <!-- 文本 -->
                <text>{{item2.cat_name}}</text>
              </view>
            </block>
            
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import my_search from '../../components/my_search/my_search.vue'
  import badgeMix from '../../mixins/mixins.js'
  export default {
    mixins:[badgeMix],
    data() {
      return {
        // 设备可用高度
        wh:0,
        cateList:[],
        active:0,
        // 二级分类列表
        cateLevel2:[],
        // 滚动位置
        scrolltop:0
      };
    },
    components: {
      'my-search':my_search
    },
    onLoad() {
      const systemInfo = uni.getSystemInfoSync()
      console.log(systemInfo)
      this.wh = systemInfo.windowHeight - 50
      // 获取分类列表
      this.getCateList()
    },
    methods:{
     async getCateList() {
       const {data:res} = await uni.$http.get('categories')
       // console.log(res)
       if(res.meta.status !== 200) {
         return uni.$showMsg()
       }
       this.cateList = res.message
       this.cateLevel2 = res.message[0].children
      },
      activeChange(i) {
        this.active = i
      },
      goToGoodsList(item2) {
        console.log(item2.cat_id)
        uni.navigateTo({
          url:'/subpackages/goods_list/goods_list?cid=' + item2.cat_id
        })
        
      },
      gotoSearch() {
        uni.navigateTo({
          url:'/subpackages/search/search'
        })
      }
    },
    watch: {
      active(newValue, oldValue) {
        this.cateLevel2 = this.cateList[newValue].children
        this.scrolltop = this.scrolltop ? 0 : 1
      }
    },
  }
</script>

<style lang="scss">
.scroll-view-container {
  display: flex;
  .left-scroll-row {
    width: 120px;
  }
  .left-scroll-view-item {
  background-color: #F7F7F7;
  line-height: 60px;
  text-align: center;
  font-size: 12px;
  &.active {
    background-color: #fff;
    position: relative;
    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 30px;
      background-color: #C00000;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  }
  .right-scroll-item {
    .right-scroll-title {
      text-align: center;
      font-size: 12px;
      padding:15px 0;
      font-weight: 900;
      
    }
    .cate_leav3 {
      display: flex;
      flex-wrap: wrap;
      .cate_leav3_item {
        width: 33.333333%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
              width: 60px;
              height: 60px;
            }
        text {
          font-size:  12px;
        }    
      }
    }
  }
}
</style>
